<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:38:38
 * @LastEditTime: 2021-06-21 17:40:59
 * @LastEditors: coocase
 * @Description: 微信支付
 * @FilePath: \git\dami\src\pages\pay\qrPay.vue
-->
<template>
  <div>
    <Steps :current="3">
      <Step title="选择商品"></Step>
      <Step title="确认订单信息"></Step>
      <Step title="支付订单"></Step>
      <Step title="收取商品"></Step>
    </Steps>
    <div class="wrap">
      <div class="QR-wrap">
        <div class="QR-title">订单将在两小时后关闭，请及时付款</div>
        <div class="QR">
          <svg class="icon icon-qr" aria-hidden="true">
            <use xlink:href="#icon-qr1154761easyiconnet"></use>
          </svg>
        </div>
        <div class="QR-tip">请使用扫一扫完成支付</div>
        <div class="btn-wrap">
          <Button
            class="btn"
            type="primary"
            @click="success()"
            :to="{ name: 'success' }"
            >支付完成</Button
          >
          <!-- <Button type="primary">支付失败</Button> -->
        </div>
      </div>
      <div class="info">
        <div class="info-title">订单详情</div>
        <div class="info-id">支付订单号:{{ code }}</div>
        <div class="info-name">商品名称:{{ datas.itemName }}</div>
        <div class="price">
          订单金额: ￥<span>{{ datas.minPrice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../../common/eventBus";
export default {
  name: "qrPay",
  data() {
    return {
      datas: JSON.parse(localStorage.getItem("itemInfo")),
      buydatas: "",
      selected: "",
      form: {
        user: "",
        phone: "",
      },
      // 订单编号
      code: Math.floor(Math.random() * 1e10)
        .toString()
        .replace(/^0+/, ""),
      // 下单时间
      upTime:
        new Date().toLocaleDateString() +
        "  " +
        new Date().toLocaleTimeString(),
    };
  },
  computed: {
    getprice() {
      var arr = [];
      if (this.buydatas.itemPrice) {
        //不做判断的话，数据不存在时则会报错 foreach 未定义
        this.buydatas.itemPrice.forEach((el) => {
          arr.push(el.price);
        });
      }
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let el = arr[j + 1];
            arr[j + 1] = arr[j];
            arr[j] = el;
          }
        }
      }
      return arr;
    },
  },
  methods: {
    // 支付完成
    success() {
      // console.log("dfasfsdf");
      // console.log("data", this.datas);
      // console.log("user", this.form.user);
      // console.log("phone", this.form.phone);
      // console.log("time", this.upTime);
      const orderItem = {
        code: this.code,
        user: this.form.user,
        phone: this.form.phone,
        upTime: this.upTime,
        name: this.datas.itemName,
        minPrice: this.datas.minPrice,
      };
      console.log(orderItem, "item");
      if (localStorage.getItem("order") !== null) {
        console.log(orderItem, "存在");
        let order = JSON.parse(localStorage.getItem("order"));
        console.log("当前的order", order);

        // let order = JSON.parse(localStorage.getItem("order"));

        order.push(orderItem);
        localStorage.setItem("order", JSON.stringify(order));
      }
    },
    //根据等级返回价格
    price: function (level) {
      var price = 0;
      switch (level) {
        case 3:
          price = this.getprice[3];
          break;
        case 4:
          price = this.getprice[2];
          break;
        case 5:
          price = this.getprice[1];
          break;
        default:
          price = this.getprice[0];
          break;
      }
      return price;
    },
    totalPrice() {
      var total = 0;
      for (let i = 0; i < this.selected.length; i++) {
        const element = this.selected[i];
        total = total + this.price(this.selected[i][2]);
      }
      return total;
    },
  },
  created: function () {
    bus.$off("paydatas").$on("paydatas", (paydatas, selected, form) => {
      this.buydatas = paydatas;
      this.selected = selected;
      this.form = form;
      // console.log(this.form);
    });
  },
  beforeDestroy() {
    // var money =
    bus.$emit("paydatas", this.totalPrice(), this.form);
  },
};
</script>

<style  scoped>
.wrap {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .btn-wrap .btn{
   margin: 30px; 
} */
.icon-qr {
  background-color: #fff;
  font-size: 150px;
  color: rgb(0, 0, 0);
}
.QR-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 300px;
  margin-right: 100px;
}
.QR-wrap .QR-title,
.QR-tip {
  font-size: 12px;
}
.info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.info-title,
.info-id,
.info-name,
.price {
  margin: 10px;
  font-weight: bold;
}
.price span {
  color: #ff1268;
}
</style>

